<template>
  <div class="home">
    <div class="left">
      <div class="top">
        <!-- 员工总数和部门总数卡片 -->
        <div class="summary-cards">
          <el-card class="summary-card">
            <div class="card-content">
              <h3>员工总数</h3>
              <p>{{ totalEmployees }}</p>
            </div>
          </el-card>
          <el-card class="summary-card" style="margin-left: 20px;">
            <div class="card-content">
              <h3>部门总数</h3>
              <p>{{ totalDepartments }}</p>
            </div>
          </el-card>
        </div>
      </div>
      <div class="bottom">
        <div class="date">
          <el-calendar v-model="value" />
        </div>
      </div>
    </div>

    <div class="right">
      <div class="search">
        <!-- 搜索新增栏 -->
        <el-form label-width="auto" class="search-form">
          <el-form-item label="按姓名查询">
            <el-input v-model="adminName" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList" style="margin-left: 16px;">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addOpen(null)" style="margin-left: 16px;">新增</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table :data="tableData" class="data-table" style="width: 100%">
          <el-table-column prop="adminName" label="姓名" width="100" />
          <el-table-column prop="adminAccount" label="账户" width="100" />
          <el-table-column prop="adminSex" label="性别" width="100" />
          <el-table-column prop="adminAge" label="年龄" width="80" />
          <el-table-column prop="departmentId" label="部门ID" width="80"/>
          <el-table-column label="操作" width="190">
            <template #default="scope">
              <el-button type="primary" @click="addOpen(scope.row)">修改</el-button>

              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF"
                title="确定删除" @confirm="() => deleteAdmin(scope.row.adminId)">
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
              
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页样式 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange" 
            :current-page="currentPage" 
            :page-sizes="[1,2,3, 5, 10, 20]" 
            :page-size="size" 
            layout="total, sizes, prev, pager, next" 
            :total="total"
          />
        </div>
        
        <!-- 新增弹窗 -->
        <el-dialog v-model="dialogFormVisible" :title="form.adminId ? '修改' : '新增'" width="500">
          <el-form ref="formRef" :model="form" :rules="formRule">
            <el-form-item label="姓名" prop="adminName">
              <el-input v-model="form.adminName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="账号" prop="adminAccount">
              <el-input v-model="form.adminAccount" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="adminPassword">
              <el-input type="password" v-model="form.adminPassword" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" prop="adminSex">
              <el-radio v-model="form.adminSex" label="男">男</el-radio>
              <el-radio v-model="form.adminSex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="年龄" prop="adminAge">
              <el-input v-model="form.adminAge" autocomplete="off" />
            </el-form-item>
            <el-form-item label="部门ID" prop="departmentId">
              <el-input v-model="form.departmentId" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>  
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="submit">确定</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div> 
  </div>
</template>


<script setup>
import { useRouter, useRoute } from 'vue-router'
import { GET, POST } from '../../../api/index'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

let totalEmployees = ref("");
let totalDepartments = ref("");

async function getStatistics() {
  try {
    let employeeRes = await GET('http://localhost:9999/User/totalEmployees');
    let departmentRes = await GET('http://localhost:9999/User/totalDepartments');
    totalEmployees.value = employeeRes.data;
    totalDepartments.value = departmentRes.data;
  } catch (error) {
    console.error("Error fetching statistics:", error);
    ElMessage.error("无法获取统计数据");
  }
}

const value = ref(new Date())
let tableData = ref([]);
let total = ref(0);
let size = ref(3), currentPage = ref(1);

function currentChange(_page){
  currentPage.value = _page;
  getList();
}

function sizeChange(_size){
  size.value = _size;
  currentPage.value = 1;
  getList();
}

let adminName = ref('');

async function getList() {
  let res = await GET('http://localhost:9999/Admin/selectList', { adminName: adminName.value, page: currentPage.value, size: size.value });
  tableData.value = res.data.list;
  total.value = res.data.total;
}

let dialogFormVisible = ref(false);
let defaultForm = {
  "adminId": "",
  "adminAccount": "",
  "adminSex": "",
  "adminAge": "",
  "adminName": "",
  "adminPassword": "",
  "departmentId": ""
};

let formRef = ref(null);
let form = ref({});

function addOpen(row){
  dialogFormVisible.value = true;
  form.value = Object.assign(row ? row : defaultForm);
}

function submit(){
  formRef.value.validate(async(valid) => {
    if(valid){
      let res;
      if(!form.value.adminId){
        res = await POST('http://localhost:9999/Admin/add', form.value);
      }else{
        res = await POST('http://localhost:9999/Admin/update', form.value);
      }
      if(res.code == 200 && res.data == 1) {
        ElMessage.success(form.value.adminId ? '修改成功' : '新增成功');
        dialogFormVisible.value = false;
        currentPage.value = 1;
        await getList();
      } 
    }
  });
}

let formRule = {
  adminName: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  adminAccount: [
    { required: true, message: '请输入账户', trigger: 'blur' },
  ],
  adminPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
};

async function deleteAdmin(id) {
  let res = await POST('http://localhost:9999/Admin/delete', { adminId: id });
  if (res.data.num != 0) {
    ElMessage.success("删除成功");
    await getList();
  }
}

onMounted(async () => {
  await getList();
  await getStatistics();
});
</script>


<style scoped>
.home {
  display: flex; /* Flexbox 布局 */
  height: 100vh; /* 100% 高度 */
}

.left {
  flex: 1; /* 左侧占 1 部分 */
  padding: 20px; /* 内边距 */
  background-color: skyblue; /* 更柔和的背景色 */
  border-right: 1px solid #e0e0e0; /* 右边框以分隔 */
}

.right {
  flex: 1; /* 右侧占 1 部分 */
  padding: 20px; /* 内边距 */
  background-color: skyblue; /* 背景色 */
}

/* 顶部部分样式 */
.top {
  display: flex; /* 顶部部分 */
  margin-bottom: 20px; /* 底部边距 */
}

/* 卡片容器 */
.summary-cards {
  margin-left: 50px;
  display: flex; /* 卡片容器 */
  /* flex-wrap: wrap; 允许换行 */
  justify-content: space-between; /* 卡片之间的间距 */
}

/* 卡片样式 */
.summary-card {
  width: calc(50% - 10px); /* 卡片宽度为一半减去间距 */
  background-color: #ffffff; /* 卡片背景色 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  padding: 20px; /* 内边距 */
  margin-left: 50px;
  margin-bottom: 20px; /* 卡片之间的间距 */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* 动画效果 */
}

.summary-card:hover {
  transform: translateY(-5px); /* 鼠标悬停时的提升效果 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* 鼠标悬停时的阴影效果 */
}

.card-content {
  text-align: center; /* 内容居中 */
}

.card-content h3 {
  font-size: 1.2rem; /* 标题大小 */
  margin: 0; /* 取消外边距 */
  color: #333; /* 标题颜色 */
}

.card-content p {
  font-size: 1.5rem; /* 数量字体大小 */
  margin: 10px 0 0; /* 上边距、下边距 */
  color: #007BFF; /* 数量颜色 */
}

/* 搜索框样式 */
.search-form {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 20px; /* 搜索框与列表之间的间距 */
}

/* 数据表格样式 */
.data-table {
  margin-top: 20px; /* 表格与搜索框之间的间距 */
}

/* 分页器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  margin-top: 16px; /* 上边距 */
}

/* 弹窗底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
}

.dialog-footer .el-button {
  margin-left: 10px; /* 按钮之间的间距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home {
    flex-direction: column; /* 在小屏幕上变为纵向布局 */
  }
  
  .left, .right {
    flex: none; /* 取消弹性 */
    width: 100%; /* 宽度100% */
    border-right: none; /* 取消右边框 */
  }
  
  .summary-cards {
    flex-direction: column; /* 卡片纵向排列 */
  }

  .summary-card {
    width: 100%; /* 卡片宽度100% */
    margin-left: 0; /* 取消左边距 */
    margin-bottom: 20px; /* 卡片之间的间距 */
  }
}
</style>
